@charset "utf-8";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}

@mixin nav1{
    width: r(704);
    height: r(115);
    margin: 0 auto;
    vertical-align: middle;
    display: block;
    .zt_left2{
        line-height: r(96);
        display: inline-block;
        .aa{
            width: r(37);
            height: r(35);
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            margin-left: r(17);
            font-size: r(30);
            i{
                color: #FF9344;
            }
        }
    }
    .zt_right2{
        float: right;
        line-height: r(100);
        span{
            font-size: r(25); 
        }
        i{
            color: #FF9344;
        }
    }    
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
//  background: red;
    position: relative;
    header{
        width: 100%;
        height: r(150);
        background: white;
        position: absolute;
        top: 0;
        .logo{
            width: r(124);
            height: r(123);
            float: left;
            margin-left: r(23);
            margin-top: r(17);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .shousuo{
            width: r(704);
            height: r(120);
            margin: 0 auto;
            .searchBar{
                width: r(270);
                height: r(55);
                line-height: r(55);
                border: 1px solid #ff9344;
                border-radius: 25px;
                margin: r(50) auto;
                box-sizing: border-box;
                font-size: r(12);
                input{
                    width: r(220);
                    height: 100%;
                    border: none;
                    vertical-align: top;
                    font-size: r(23);
                    outline: none;
                    border-radius: 25px;
                    text-indent: r(10);
                }
                i{
                    float: right;
                    padding-right:r(10) ;
                    font-size: r(33);
                    color: #ff9344;
                }
            }
        }
        
        .selectBar{
            float: right;
            margin-right: r(21);
            margin-top: r(50);
            width: r(158);
            height: r(57);
            border: 1px solid #ff9344;
            background: url(../img/tuangou/icon.png) no-repeat right center;
            background-size: r(30) r(15);
            select{
                width: 100%;
                height: 100%;
                background: transparent;
                border: none;
                -webkit-appearance: none;
                vertical-align: top;
                padding-left: r(14);
                font-size: r(25);
            }
        }
    }
    section{
        width: 100%;
        position: absolute;
        top: r(150);
        bottom: r(136);
        overflow-y: scroll;
        .tu1{
            width: 100%;
            height: r(285);
            img{
                width: 100%;
                height: 100%;
            }
        }

        .section-border1{
            @include nav1;
        }
        
        .section-tu{
            height: r(216);
            width: r(586);
            margin: 0 auto;
          font-size: 0;
            ul li img{
                width: r(240);
                height: r(93);
            }
            ul li:nth-child(1){
                line-height: r(60);
            }
            ul li:nth-child(2){
                margin-left: r(103);
                line-height: r(60);
                
            }
            
            ul li:nth-child(4){
                margin-left: r(103);
            }
            ul li{
                float: left;
            }
        }

        .section-border2{
            @include nav1;
        }
        .menu{
            width: r(704);
            height: r(163);
            margin: 0 auto;
            margin-top: r(20);
            
            .menu-tu1{
                display: inline-block;
                vertical-align: middle;
                width: r(212);
                height: r(163);
                float: left;
                img{
                    width: 100%;
                    height: 100%;
                    
                }
            }
            .menu-present{
                display: inline-block;
                vertical-align: middle;
                width: r(480);
//              margin-left: r(22);
                float: right;
                ul{
                    margin-top: r(6);
                }
                ul li .zt1{
                    font-size: r(25);
                }
                ul li .zt2{
                    font-size: r(19);
                    color: #dbdbdb;
                }
                ul li .zt3{
                    font-size: r(19);
                    color: #ff9344;
                }
            }
            .menu-jia{
                display: inline-block;
                vertical-align: middle;
//              width: 23%;
                float: right;
                margin-top: r(10);
                ul{
                    font-size: r(19);
                    margin-top: r(6);
                }
                ul li{
                    font-size: r(19);
                    text-align: right;
                }
                ul li:nth-child(2){
                    height: r(80);
                }
            }
        }

        .menu2{
            width: 96%;
            height: r(163);
            margin: r(31) auto;
//          margin-top: 25px;
//          line-height: px(163);
            img{
                width: 100%;
                height: r(163);
                
            }
            .menu-tu2{
                display: inline-block;
                vertical-align: middle;
                width: 29%;
            }
            .menu-present2{
                display: inline-block;
                vertical-align: middle;
                width: 42%;
                margin-left: r(22);
                ul{
                    margin-top: r(6);
                }
                ul li .zt1{
                    font-size: r(25);
                }
                ul li .zt2{
                    font-size: r(19);
                    color: #dbdbdb;
                }
                ul li .zt3{
                    font-size: r(19);
                    color: #ff9344;
                }
            }
            .menu-jia2{
                display: inline-block;
                vertical-align: middle;
                width: 23%;
                ul{
                    margin-top: r(6);
                }
                ul li{
                    font-size: r(19);
                    text-align: right;
                }
            }
        }
    }
    footer{
        width: 100%;
        height: r(136);
        background: white;
        position: absolute;
        bottom: 0;
        a{
            color: #000000;
        }
        
        ul li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top: 8px;
            box-sizing: border-box;
            i{
                
                color: #FF9344;
            }
            .iconfont{
                color: #FF9344;
                font-size: r(65);
                -webkit-text-stroke: 1px #FF9344;
                color: transparent;
                
            }
            &.active .iconfont{
                color: #FF9344;
            }
            p{
                font-size: r(26);
            }
            &:hover .iconfont{
                color: red;  
            }
        }
    }
}